<template>
  <div>
    <p>Interval fired: {{ counter }} </p>
    <p>
      <button @click="pause">暂停记录</button>
      <button @click="resume">继续记录</button>
    </p>
  </div>
</template>

<script setup lang="ts">
// 使用 useInterval 模拟一个视频播放10s 记录一次（发送一次请求）
// 模拟当视频暂停或者缓存时 停止计时 缓存结束或者播放开始继续计时 记录 （缓冲与播放暂停使用按钮暂停代替）
import { watch } from 'vue';
import { useInterval } from '@vueuse/core';
const { counter, pause, resume } = useInterval(1000, {
  controls: true,
  immediate: false,
});

watch(counter, newValue => {
  if (newValue === 0) {
    return;
  }
  if (newValue % 10 === 0) {
    pause();
    record();
  }
});

function record() {
  console.log('开始记录');
  setTimeout(() => {
    console.log('记录完毕');
    resume();
  }, 2000);
}

// 以上功能可以使用 useIntervalFn
// 和 useInterval 功能一直，区别就在于到达一定的时间内做一些事情的函数有watch变成了传入useIntervalFn回调中
</script>
